<template>
  <section>
    <div>
      <indication :indicationData="indicationData"></indication>
    </div>
    <div class="grid_3 subject-info-panel omega">
      <article-tree></article-tree>
    </div>
    <div class="article-show-panel grid_9">
      <div class="flex flex-h-reverse" style="border-bottom: 1px solid rgba(255,255,255,.7)">
        <div class="grid_9 flex flex-h flex-justify-space-between">
          <div class="new-article">{{articleShow.categoryName}}</div>
        </div>
      </div>

      <article-show :listDatas="articleShow.datas"></article-show>
    </div>
  </section>
</template>

<script>
import panelList from './common/PanelList'
import articleShow from './common/ArticleShow'
import articleTree from './common/ArticleTree'
import indication from './common/Indication'
import axios from '../../node_modules/axios/dist/axios'
export default {
  data () {
    return {
      indicationData: [],
      logo: {
        logoImg: require('./common/assets/articleBg.jpg')
      },
      articleShow: {
        datas: [],
        categoryName: ''
      }
    }
  },
  mounted () {
    this.loadResenctArticle(this.$route.query.nodeId)
    this.articleShow.categoryName = this.$route.query.searchTitle
    this.initIndication()
  },
  methods: {
    initIndication () {
      this.indicationData = [
        {name: '文章', path: '/article'},
        {name: '专题', path: '/subject'},
        {name: this.$route.query.searchTitle, path: {path: '/allArticle', query: this.$route.query}}
      ]
    },
    loadResenctArticle (nodeId) {
      let _this = this
      let operator = this._.isEmpty(nodeId) ? 'all' : 'specify'
      axios.get('/article/resentArticle', {params: {nodeId: nodeId, operator: operator}}).then(function (res) {
        if (res.data.status === 200) {
          _this.articleShow.datas = res.data.datas
        }
      })
    }
  },
  components: {
    panelList,
    articleTree,
    articleShow,
    indication
  }
}
</script>

<style scoped>
  .search-btn {
    position: absolute;
    top: -35px;
    right: 15px;
    background: darkgreen;
  }
  .search-btn a {
    display: block;
    padding: 10px 12px
  }
  .search-btn a:hover {
    cursor: pointer;
  }
  .subject-info-panel {
    min-height: 700px;
    margin-top: 6px;
  }
</style>
